<template>
  <div ref="tsRoot">
    <divHeader
      ref="tsHeader"
      v-if="$store.state.headers"
      class="fixed-header"
    ></divHeader>
    <div class="main-content" :class="{ 'with-header': $store.state.headers }">
      <nuxt ref="tsNuxt" />
    </div>
    <divFooter v-if="$store.state.footers"></divFooter>
  </div>
</template>
<script>
import divHeader from "~/components/headers.vue";
import divFooter from "~/components/footers.vue";
export default {
  components: {
    divHeader,
    divFooter,
  },
  created() {},
  data() {
    return {
      observer: null,
      topDetector: null,
    };
  },
  mounted() {
    this.setupIntersectionObserver();
  },
  beforeDestroy() {
    // 移除滾動事件監聽器
    if (typeof window !== "undefined") {
      window.removeEventListener("scroll", this.checkDetectorPosition);
    }

    // 移除頂部檢測元素
    if (this.topDetector && this.topDetector.parentNode) {
      this.topDetector.parentNode.removeChild(this.topDetector);
    }
  },
  methods: {
    setupIntersectionObserver() {
      this.$nextTick(() => {
        // 創建頂部檢測元素
        this.topDetector = document.createElement("div");
        this.topDetector.id = "top-detector";
        this.topDetector.style.position = "relative";
        this.topDetector.style.top = "-1px";
        this.topDetector.style.left = "0";
        this.topDetector.style.width = "100%";
        this.topDetector.style.height = "0.1px";
        this.topDetector.style.pointerEvents = "none";
        this.topDetector.style.opacity = "0";
        this.topDetector.style.visibility = "hidden";
        this.topDetector.style.overflow = "hidden";
        this.topDetector.style.zIndex = "-1";

        // 將元素添加到body的最前面
        document.body.insertBefore(this.topDetector, document.body.firstChild);

        // 創建一個監聽器來檢測元素位置
        if (typeof window !== "undefined") {
          // 使用scroll事件來檢測元素位置
          window.addEventListener("scroll", this.checkDetectorPosition, {
            passive: true,
          });

          // 初始調用一次以設置初始狀態
          this.$nextTick(() => {
            this.checkDetectorPosition();
          });

          // 設置定時器定期檢查位置
          setInterval(this.checkDetectorPosition, 300);
        }
      });
    },

    checkDetectorPosition() {
      if (!this.topDetector) return;

      // 獲取元素相對於視窗的位置
      const rect = this.topDetector.getBoundingClientRect();

      // 當元素頂部位置小於-50px時，表示頁面已經滾動超過50px
      if (rect.top < -50) {
        // 添加全局滾動類
        document.body.classList.add("header-scrolled");
        if (
          this.$refs.tsHeader &&
          typeof this.$refs.tsHeader.setScrolled === "function"
        ) {
          this.$refs.tsHeader.setScrolled(true);
        }
      } else {
        // 當元素頂部位置大於等於-50px時，頭部背景保持透明
        document.body.classList.remove("header-scrolled");
        if (
          this.$refs.tsHeader &&
          typeof this.$refs.tsHeader.setScrolled === "function"
        ) {
          this.$refs.tsHeader.setScrolled(false);
        }
      }
    },
  },
};
</script>

<style scoped>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.main-content {
  min-height: 100vh;
}
</style>
